lit ojs test

description

esbuils + lit + observable

lit = import('https://cdn.skypack.dev/lit@2.7.0?min')
LitElement = lit.LitElement
css=lit.css

SimpleGreeting, html`<simple-greeting name="from a Javascript cell,
  returning an HTML literal"></simple-greeting>`

SimpleGreeting = {
  class SimpleGreeting extends LitElement {
    static get styles() {
      return css`
        :host {
          display: inline-block; }

        div {
          color: indigo; font-family: 'Georgia';
          border: 4px solid indigo; border-radius: 2rem;
          padding: 1rem 1.5rem; margin-bottom: 1rem; }

        div:hover {
          background-color: indigo; color: white; }`;
    }
  
    static get properties() {
      return {
        name: { type: String }
      }
    }
  
    constructor() {
      super();
      this.name = 'Somebody';
    }
  
    render() {
      return html`<div>Hello, <em>${this.name}!</em></div>`;
    }
  }
  if( !window.customElements.get( 'simple-greeting')) {
    window.customElements.define( 'simple-greeting', SimpleGreeting)
  }
  return SimpleGreeting
}